<template>
	<view class="content">
		<view class="mine-block">
			<button v-if="info.phone_number" class="upload-photo-btn" open-type="chooseAvatar"
				@chooseavatar="changeAvatar" hover-class="none">
				<view class="tips">点击编辑</view>
				<image :src="info.avatar" class="user-photo ps"></image>
			</button>
			<image v-else src="@/static/images/mine/user_photo.png" class="user-photo"></image>
			<view class="mine-item">
				<view v-if="info.phone_number">
					<view class="name">{{info.name||'微信用户'}}</view>
					<view class="phone">{{info.phone_number}}</view>
				</view>
				<button v-else class="user-name" open-type="getPhoneNumber" hover-class="none"
					@getphonenumber="getPhoneNumber">点击登录</button>
			</view>
		</view>
		<view class="info-block">
			<view class="notice">
				<view class="title-item">
					<image src="/static/images/home/notice.png" class="notice-img" mode="widthFix"></image>
					<view class="thread"></view>
				</view>
				<view class="notice swiper-item">
					<swiper autoplay="true" class="notice-list" vertical="true" interval="8000">
						<swiper-item v-for="(item,index) in newsList" :key="item.id" :item-id="item.id"
							class="notice-item" @click="navigate('/pages/index/detail?id='+item.id)">
							<view class="news">{{item.title}}</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="info-list">
				<view class="info-item" @click="navigate('/pages/mine/profile')">
					<view class="info-left">
						<image src="/static/images/mine/ziliao.png" class="iconfont"></image>
						<view class="title">实名认证</view>
					</view>
					<view class="authentication" v-if="info.autherized===1">{{info.autherized_text}}</view>
					<view class="authentication1" v-else>{{info.autherized_text}}</view>
					<view class="iconfont icon-a-gengduo1"></view>
				</view>
				<view class="info-item" @click="navigate1('/pages/house/house')">
					<view class="info-left">
						<image src="/static/images/mine/renzheng.png" class="iconfont"></image>
						<view class="title">房屋认证</view>
					</view>
					<view class="iconfont icon-a-gengduo1"></view>
				</view>
				<view class="info-item" @click="navigate('/pages/my_report/my_report')">
					<view class="info-left">
						<image src="/static/images/mine/baoxiu.png" class="iconfont"></image>
						<view class="title">我的报修</view>
					</view>
					<view class="iconfont icon-a-gengduo1"></view>
				</view>
				<view class="info-item" @click="navigate('/pages/representative/index')">
					<view class="info-left">
						<image src="/static/images/mine/fankuui.png" class="iconfont"></image>
						<view class="title">我的意见建议</view>
					</view>
					<view class="iconfont icon-a-gengduo1"></view>
				</view>
				<view class="info-item" @click="logout" v-if="info.phone_number">
					<view class="info-left">
						<image src="/static/images/mine/fanhui.png" class="iconfont"></image>
						<view class="title">退出登录</view>
					</view>
					<view class="iconfont icon-a-gengduo1"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPublicListApi
	} from '@/api/home.js'
	import {
		getWxLoginCode
	} from '@/util/user.js'
	import {
		savePhoneNumberByCode,
		saveAvatar,
		getUserStatistic,
		getUserApi
	} from '@/api/login.js'
	import {
		uploadFile
	} from '@/api/file.js'
	import {
		removeStorage,
		getStorage
	} from '@/util/auth.js';
	export default {
		data() {
			return {
				info: {
					avatar: '',
					name: '',
					phone_number: ''
				},
				newsList: []
			}
		},
		onShow() {
			if (getStorage('user')) {
				this.info = getStorage('user')
				this.setUser()
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			navigate1(url) {
				if (this.info.autherized == 1) {
					uni.navigateTo({
						url
					})
				} else {
					this.showToast('请完成实名认证');
					uni.showToast({
						title: '请完成实名认证',
						icon: 'none',
						duration: 1000,
						mask: true,
						success: function() {
							setTimeout(function() {
								uni.redirectTo({
									url: '/pages/mine/profile'
								})
							}, 1000)
						},
					})
				}
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: `确定要退出重新登录吗？`,
					confirmColor: '#BA1519',
					success: (res) => {
						if (res.confirm) {
							removeStorage('token');
							removeStorage('user');
							this.info.phone_number = ''
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}
					}
				})
			},
			setUser() {
				this.info = this.$store.getters.user;
			},
			changeAvatar(e) {
				uploadFile(e.detail.avatarUrl).then(res => {
					uni.showLoading({
						title: '保存中',
						mask: true
					})
					saveAvatar({
						avatar: res
					}).then((res) => {
						let user = getStorage('user')
						console.log(user)
						this.info.avatar = user.avatar
						console.log(this.info.avatar)
						this.showToast('保存成功');
						this.$store.dispatch('user/getUser')
					})
				})
			},
			async getPhoneNumber(e) {
				if (!e.detail.code) {
					this.showToast('您取消了授权');
					return;
				}
				if (!getStorage("token")) {
					let loginCode = await getWxLoginCode()
					uni.showLoading({
						title: '登录中',
						mask: true,
					})
					await this.$store.dispatch('user/getWxLoginCode', loginCode)
				}
				uni.showLoading({
					title: '登录中',
					mask: true
				})
				savePhoneNumberByCode({
					code: e.detail.code
				}).then(() => {
					this.$store.dispatch('user/getUser')
					getUserApi().then((res) => {
						this.info = res
					})
				})
			},
			getNoticeList() {
				uni.showLoading()
				getPublicListApi({
					limit: 4
				}).then(res => {
					this.newsList = res || [];
				}).catch(() => {
					uni.hideLoading()
				})
			},
		},
		onLoad() {
			this.getNoticeList()
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		.mine-block {
			padding: 30rpx;
			background-color: #BA1519;
			height: 340rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.upload-photo-btn {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				position: relative;
				padding: 0;
				margin-left: 30rpx;
				margin-right: 30rpx;

				.tips {
					font-size: 20rpx;
					width: 100%;
					position: absolute;
					bottom: 0;
					left: 0;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					background: rgba(0, 0, 0, 0.5);
					z-index: 1;
					height: 48rpx;
				}
			}

			.user-photo {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				margin-right: 30rpx;
			}

			.user-photo.ps {
				position: absolute;
				left: 0;
				top: 0;

			}

			.img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				background-color: #fff;
				margin-right: 30rpx;
			}

			.mine-item {
				display: flex;
				flex-direction: column;

				.name {
					color: #fff;
					font-size: 38rpx;
					margin-bottom: 20rpx;
				}

				.phone {
					color: #fff;
					font-size: 32rpx;
				}


				.user-name {
					font-size: 36rpx;
					font-weight: bold;
					background: none;
					margin: 0;
					border-radius: 0;
					line-height: normal;
					padding: 0;
					color: #fff;

					&::after {
						border: none;
					}
				}
			}
		}

		.info-block {
			min-height: 70vh;
			display: flex;
			flex-direction: column;
			background: #F7F6F9;
			margin-top: -60rpx;
			border-radius: 60rpx;
			position: relative;
			padding: 30rpx;

			.notice {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				height: 100rpx;
				align-items: center;
				margin-top: 20rpx;
				background: #F3EAED;
				border-radius: 16rpx;

				.title-item {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-left: 5px;

					.notice-img {
						width: 140rpx;
						height: 36rpx !important;
					}

					.thread {
						margin-left: 20rpx;
						width: 4rpx;
						height: 36rpx;
						border-radius: 6rpx;
						background-image: linear-gradient(#BEC3E0, #BA1519, #BEC3E0);
					}

					.title {
						font-weight: bold;
						font-size: 38rpx;
						//margin-right: 10rpx;

					}

					.text {
						background: #027BFD;
						color: #fff;
						font-size: 40rpx;
						margin-right: 30rpx;

					}
				}

				.notice.swiper-item {
					height: 60rpx;
					//border-left: 1.5px solid #027BFD;
					margin-top: 0;

					.notice-list {
						width: 480rpx;
						height: 60rpx;
						margin-left: 10rpx;

						.notice-item {
							height: 60rpx;
							display: flex;
							align-items: center;

							.news {
								font-size: 28rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}
				}
			}

			.info-list {
				background: #fff;
				margin-top: 30rpx;
				border-radius: 20rpx;
				padding: 30rpx;

				.info-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 120rpx;

					.info-left {
						display: flex;
						align-items: center;

						.iconfont {
							width: 40rpx;
							height: 40rpx;
							margin-right: 20rpx;
						}
					}

					.authentication {
						color: #1BBE6B;
						margin-left: 70rpx;
					}

					.authentication1 {
						color: #BA1519;
					}
				}
			}
		}
	}
</style>